<template>
  <div class="app_workflow_container">
    <div class="fd-nav">
      <div class="fd-nav-left">
        <a-icon type="arrow-left" class="icon_button" @click="$router.back()"/>
        <span class="fd-nav-title" style="margin-left: 10px">{{ data1.name }}</span>
      </div>
      <div class="fd-nav-center">
        <div class="fd-nav-container">
          <div class="fd-nav-item">
            <!-- <span
              class="order-num"
            >1</span>流程设计 -->
          </div>
        </div>
      </div>
      <div class="fd-nav-right">
        <!-- <button
          type="button"
          class="ant-btn button-preview"
          @click="preview"
        >
          <span>预 览</span>
        </button> -->
        <a-button type="primary" @click="save(true)">
          发 布
        </a-button>
      </div>
    </div>
    <div class="fd-nav-content">
      <div
        class="dingflow-design"
      >
        <div class="ie-polyfill-container">
          <div
            id="box-scale"
            class="box-scale"
            style="transform: scale(1); transform-origin: 50% 0px 0px;"
          >
            <Node
              v-for="item in items"
              :key="item.nodeId"
              :node="item"
              @save="save"
              @addnode="addnode"
              @delNode="delNode(item)"
            />
            <EndNode />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import EndNode from './end-node'
import {getWorkflowDetail} from "@/api/appWorkflow"
import {uuid} from "@/utils/utils"

import { iteratorData, addNewNode, delNode } from './process'

export default {
  name: 'WorkflowUi',
  components: {
    EndNode
  },
  props: {
    data: {
      type: Object,
      default: undefined
    }
  },
  data: () => ({
    items: [],
    data1: {
      name: '工作流',
      node: undefined
    }
  }),
  watch: {
    data: {
      handler (val) {
        this.data1 = val
      },
      deep: true
    }
  },
  async mounted () {
    let workflowDetail = await getWorkflowDetail(this.id)
    let data = workflowDetail.definitionTree
    if (data && data.node) {
      this.data1 = data
    }
    this.data1.name = workflowDetail.name
    if (!this.data1.node) {
      let trigger
      for (const key in this.trigger) {
          const element = this.trigger[key];
          trigger = JSON.parse(JSON.stringify(element))
          break
      }
      this.data1.node = Object.assign({
        name: '工作流程',
        type: 'TRIGGER',
        nodeId: uuid()
      }, trigger)
    }
    this.iteratorData(this.data1.node)
  },
  computed:{
      id(){
          return this.$route.params.id
      },
      trigger () {
        return this.$store.getters?.nodeDefinitions?.trigger || {}
      },
  },
  methods: {
    iteratorData (data) {
      this.items = []
      iteratorData(this.items, data)
    },
    addnode (node) {
      addNewNode(node, this.data1.node, this.items)
      this.$emit('ok', this.data1)
    },
    delNode (node) {
      delNode(node, this.data1.node, this.items)
      this.$emit('ok', this.data1)
    },
    save (published) {
      this.$emit('ok', this.data1, published)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

<style lang="less">
@import "../../style.less";
</style>